<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Html5中画布元素</title>
</head>
<style>
    
    #heart{
        width: 400px;
        height: 400px;
        left: 535px;
        top:100px;
        position: relative;
        animation: heart 2s infinite;
    }

    @keyframes heart{
        0%{
            transform: scale(0.8,0.8);
        }
        50%{
            transform: scale(1,1);
        }
        100%{
            transform: scale(0.8,0.8);
        }
    }

    #left{
        width:200px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
    }

    #right{
        width:200px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        left:150px;
    }

    #square{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        left:-25px;
        top: -26px;
        transform: translate(100px,100px) rotate(45deg);
    }
</style>

<body>
    <div id="heart">
        <div id="left"></div>
        <div id="right"></div>
        <div id="square"></div>
    </div>
</body>
<script type="text/javascript" src="draw.js" charset="utf-8"></script>

</html>